<!--设备选择组件-->
<template>
    <div class="page-box">
        <el-row class="page-box-item">
            <el-col :span="4" style="padding-left: 0; padding-right: 0; margin:-5px">
                <el-card shadow="never">
                    <el-input v-model="filterText" style="width:160px" placeholder="请输入类型名称"></el-input>
                    <el-tree :data="treeData" v-loading="isLoadingTree" :props="defaultProps" @node-click="treeClick"
                        :filter-node-method="filterNode" ref="tree"></el-tree>
                </el-card>
            </el-col>
            <el-col :span="20" style="padding-left: 5px; padding-right: 5px;">
                <div class="page-search">
                    <div>
                        <label>设备编码</label>
                        <el-input v-model="searchForm.MachineryCode" style="width:160px"
                            placeholder="请输入设备编码"></el-input>
                    </div>
                    <div>
                        <label>设备名称</label>
                        <el-input v-model="searchForm.MachineryName" style="width:160px"
                            placeholder="请输入设备名称"></el-input>
                    </div>
                    <div>
                        <label>设备状态</label>
                        <el-input v-model="searchForm.Status" style="width:160px" placeholder="请输入设备状态"></el-input>
                    </div>

                    <div>
                        <el-button type="primary" @click="search">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
                <div class="page-section">
                    <!--表单-->
                    <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360"
                        row-key="Id">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column fixed prop="MachineryCode" label="设备编码"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="MachineryName" label="设备名称"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="MachineryTypeName" label="所属分类"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="WorkshopName" label="所属车间"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Status" label="设备状态" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Location" label="位置" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="PurchasingTime" label="购买日期"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="MachinerySpec" label="型号"
                            :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Capacity" label="产能" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Updater" label="修改人" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="UpdateTime" label="修改日期" :show-overflow-tooltip="true"></el-table-column>
                    </el-table>
                    <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                        :TotalCount="pageDomain.TotalCount" />
                </div>
                <div class="page-box-footer">
                    <el-button type="primary" @click="checked">确认选择</el-button>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import Pagination from '@/components/Pagination.vue'
export default {
    props: {
        MachineryList: {
            type: Array,
            required: true
        }
    },
    components: {
        Pagination
    },
    mounted() {
        this.dataBind()
        this.GetMachineryType()

        window.addEventListener('resize', () => {
            if (this.$refs.dataForm)
                this.$refs.dataForm.doLayout();
        })
    },
    destroyed() {
        window.removeEventListener('resize', () => { });
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    data() {
        return {
            filterText: '',
            //搜索字段
            searchForm: {
                MachineryCode: '',
                MachineryName: '',
                Status: '',
                MachineryTypeId: -1
            },
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false,
            isLoadingTree: false,
            //树形数据
            treeData: [],
            defaultProps: {
                children: 'Children',
                label: 'MachineryTypeName'
            }
        }
    },
    methods: {
        //搜索按钮
        search() {
            this.pageDomain.PageIndex = 1
            this.dataBind()
        },
        //重置按钮
        reset() {
            this.searchForm.MachineryCode = ''
            this.searchForm.MachineryName = ''
            this.searchForm.Status = ''
            this.searchForm.MachineryTypeId = -1
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
        //点击树形数据时
        treeClick(data) {
            this.searchForm.MachineryTypeId = data.Id
            this.dataBind()
            console.log(data);

        },
        //获取数据
        dataBind() {
            this.isLoading = true
            this.$http.get('/api/Machinery',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        MachineryTypeName: this.searchForm.MachineryTypeName,
                        MachineryCode: this.searchForm.MachineryCode,
                        MachineryName: this.searchForm.MachineryName,
                        Status: this.searchForm.Status,
                        MachineryTypeId: this.searchForm.MachineryTypeId
                    }
                })
                .then(res => {
                    this.tableData = res.Data
                    this.pageDomain.TotalCount = res.Count
                    this.isLoading = false
                })
        },
        //获取树形数据
        GetMachineryType() {
            this.isloadingTree = true
            this.$http.get('/api/MachineryType/GetAll', {
                params: {
                    MachineryTypeCode: '',
                    MachineryTypeName: '',
                }
            })
                .then((res) => {
                    this.treeData = res.Data;
                    this.isloadingTree = false;
                    this.treeData.unshift({ Id: -1, MachineryTypeName: '全部' })
                })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.MachineryTypeName.indexOf(value) !== 1
        },
        checked() {
            //获取选中的每一项
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请选择一项');
                return;
            }
            this.$refs.dataForm.selection.map(model => {
                var arr = this.MachineryList.filter(x => x.MachineryId == model.Id);
                if (arr.length <= 0) {
                    var obj = new Object();
                    //处理所需字段
                    this.$set(obj, 'MachineryId', model.Id);
                    this.$set(obj, 'MachineryCode', model.MachineryCode);
                    this.$set(obj, 'MachineryName', model.MachineryName);
                    this.$set(obj, 'Quantity', 1);
                    this.$set(obj, 'Remark', '');
                    this.$set(obj, 'CreateTime', model.CreateTime);
                    this.MachineryList.push(obj);
                }
            })
            this.$emit('callback');
        }
    }
}
</script>